<template>
	<div class="content">
			<div class="title">注册</div>
			<form action="#" method="get" class="form">
				<span class="span">手机号</span>
				<div class="username_box">
					<input type="text" class="username text" />
				</div>
				<span class="span">密码</span>
				<div class="userpass_box">
					<input type="password" class="userpass text" id="userpass"/>
				</div>
				<span class="span">确认密码</span>
				<div class="userpass_box">
					<input type="password" class="userpass queuserpass text" id="queuserpass"/>
				</div>
				<input type="submit" value="注册" class="sub" disabled="disabled"/>
			</form>
		</div>
</template>

<script>
	export default {
	   mounted:function(){
	   	//眼睛睁开，改变type值
	    var login_bg =document.getElementById("login_bg");
	    var userpass =document.getElementById("userpass");
	   
	    //当用户名和密码都输入时，提交按钮变色，
	     /* 声明一个数组用来存input值 */
        var array = ["", ""];
	   	 /*方法调用*/
        inputFn(".username", 0);
        inputFn(".userpass", 1);
         /*键盘弹起时实时生效*/
        function inputFn(ele, num) {
            $(ele).keyup(function(){
                var val = $(this).val().trim();
                //console.log(val);
                array[num] = val;
                inputArray();
            });
        }
        /*遍历数组，判断input值是否存在于数组中*/
        function inputArray() {
            for (var i = 0, arrayLen = array.length; i < arrayLen; i++) {
                //  如果值不在数组中 就返回 并 去掉颜色
                if (array[i] == "" ||　array[i] == null) {
                    $(".sub").removeClass("addbg");
                    //console.log(array[i] + "无法提交" + i)
                    return;
                }
            }
            //
            $(".sub").addClass("addbg").removeAttr("disabled");//解除提交按钮禁用
        }
	   }
	}
</script>

<style scoped>
	.content .title {
  text-align: center;
  height: 0.44rem;
  line-height: 0.44rem;
  padding: 0 0.15rem;
  font-size: 0.17rem;
  background: #fff;
  border-bottom: 1px solid #ebecf1;
  position: relative; }
.content .form {
  padding: 0.38rem; }
.content .span {
  font-size: 0.15rem;
  color: #c4c5ce;
  display: block;
  margin-top: 0.21rem; }
.content .userpass_box {
  position: relative; }
.content .text {
  width: 100%;
  font-size: 0.15rem;
  height: 0.32rem;
  outline: none;
  border: none;
  border-bottom: 1px solid #c4c5ce;
  display: block; }
.content .login_bg {
  position: absolute;
  bottom: 0.1rem;
  right: 0;
  background: url(/static/img/mine/login_bg1.jpg) no-repeat right center;
  display: block;
  width: 0.23rem;
  height: 0.13rem;
  background-size: 100%; }
.content .login_bg.switch {
  background: url(/static/img/mine/login_bg2.jpg) no-repeat right center;
  background-size: 100%; }
.content .sub {
  background: #d1d3db;
  line-height: 0.45rem;
  width: 100%;
  display: block;
  margin-top: 0.4rem;
  outline: none;
  border: none;
  border-radius: 50px;
  font-size: 0.16rem;
  color: #fff; }
.content .sub.addbg {
  background: #3f86ff; }
.content .forget {
  margin-top: 0.2rem;
  color: #a7b0bf;
  text-align: center;
  font-size: 0.16rem;
  display: block; }

</style>